:root {
      --bg-main: #0d2137;
      --bg-card: #1a3a6e;
      --bg-subtle: #0a1a2e;
      --text-primary: rgba(255,255,255,0.92);
      --text-muted: rgba(255,255,255,0.55);
      --border: rgba(255,255,255,0.1);
    }
    body.light-mode {
      --bg-main: #f0f4f8;
      --bg-card: #ffffff;
      --bg-subtle: #e2e8f0;
      --text-primary: #1a202c;
      --text-muted: #718096;
      --border: #e2e8f0;
    }
    body { background: var(--bg-main); transition: background 0.3s; }
    #landing-page { background: var(--bg-main); color: var(--text-primary); }
    .landing-main { background: var(--bg-main); }
    .page-clubs { background: var(--bg-main); }
    .sidebar-card { background: rgba(255,255,255,0.07); }
    body.light-mode .sidebar-card { background: white; border:1px solid #e2e8f0; }
    body.light-mode .schedule-table th { background:#e2e8f0; color:#4a5568; }
    body.light-mode .schedule-table td { border-bottom:1px solid #e2e8f0; color:#1a202c; }
    body.light-mode .schedule-table tr:hover td { background:#ebf4ff; }
    body.light-mode .landing-sidebar { border-color:#e2e8f0; }
    body.light-mode .price-row { border-bottom-color:#e2e8f0; }
    body.light-mode .price-row .label { color:#4a5568; }
    body.light-mode .contact-row { border-bottom-color:#e2e8f0; }
    body.light-mode .about-section { background:#f0f4f8; }
    body.light-mode .about-text p { color:#2d3748; }
    body.light-mode .stats-bar { background:#1e3a6e; }
    body.light-mode .page-section-title { background:rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.08); }
    .page-section-title h2 { color:white; margin:0 0 4px; }
    .page-section-title p { color:rgba(255,255,255,0.6); margin:0; }
    body.light-mode .page-section-title h2 { color:#1e3a6e; }
    body.light-mode .page-section-title p { color:#718096; }
    body.light-mode .social-bar { background:#e2e8f0; }
    body.light-mode .social-bar h3 { color:#1e3a6e; }
    body.light-mode .landing-schedule-area h2 { color:#718096; }
    body.light-mode .schedule-table td { color:#1a202c; }
    /* Theme toggle button */
    .btn-theme-toggle {
      background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
      color:white; border-radius:20px; padding:6px 14px; cursor:pointer;
      font-size:13px; font-family:inherit; display:flex; align-items:center; gap:6px;
      white-space:nowrap; transition:background 0.2s;
    }
    .btn-theme-toggle:hover { background:rgba(255,255,255,0.2); }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: var(--bg-main);
      color: var(--text-primary);
      min-height: 100vh;
    }

    header {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: white;
      padding: 20px 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    header .logo { font-size: 36px; }
    header h1 { font-size: 24px; font-weight: 700; }
    header p { font-size: 13px; color: #a0aec0; margin-top: 2px; }

    /* ===== TOP NAV LAYOUT ===== */
    #app-layout {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 90px);
    }
    @media (max-width: 600px) {
      #app-layout { min-height: calc(100vh - 120px); }
    }
    @media (max-width: 400px) {
      #app-layout { min-height: calc(100vh - 140px); }
    }

    .tabs-bar {
      background: #1a2744;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 12px;
      position: sticky;
      top: 0;
      width: 100%;
      height: 52px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      z-index: 100;
      box-sizing: border-box;
      gap: 2px;
      direction: rtl;
    }
    .tabs-bar::-webkit-scrollbar { display: none; }

    .sidebar-section-label { display: none; }
    .sidebar-logo-area { display: none; }
    .sidebar-overlay { display: none !important; }
    .btn-hamburger { display: none !important; }

    /* Old tab buttons — hidden in top bar but kept in DOM for onclick access */
    .tab-btn { display: none; }
    .tab-btn.active { display: none; }

    /* ===== CATEGORY BUTTONS ===== */
    .cat-btn {
      display: inline-flex;
      align-items: center;
      padding: 7px 14px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
      font-family: inherit;
      white-space: nowrap;
      flex-shrink: 0;
      height: 38px;
    }
    .cat-btn:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.95);
    }
    .cat-btn.active {
      background: rgba(43,108,176,0.85);
      color: white;
      font-weight: 700;
    }

    .content { padding: 28px 32px; flex: 1; min-width: 0; overflow-x: hidden; }

    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ===== HUB PAGES ===== */
    .hub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 14px;
      direction: rtl;
      padding: 24px 0 0;
    }
    .hub-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 16px;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s, transform 0.1s;
      color: var(--text-primary);
      font-family: inherit;
      width: 100%;
      box-sizing: border-box;
    }
    .hub-card:hover {
      background: var(--bg-card);
      transform: translateY(-2px);
    }
    .hub-card-icon { font-size: 30px; margin-bottom: 8px; }
    .hub-card-title { font-size: 13px; font-weight: 700; line-height: 1.3; }

    .sub-group {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      margin-bottom: 24px;
      overflow-y: auto;
    }

    .sub-group-header {
      background: linear-gradient(135deg, #2b6cb0, #2c5282);
      color: white;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sub-group-header h3 { font-size: 16px; font-weight: 700; }
    .sub-group-header .count {
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      margin-top: 3px;
      font-weight: 400;
    }
    .btn-add-in-header {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.4);
      color: white;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      white-space: nowrap;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .btn-add-in-header:hover { background: rgba(255,255,255,0.28); }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead th {
      background: #f7fafc;
      padding: 11px 16px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      color: #4a5568;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 2px solid #e2e8f0;
    }

    tbody tr {
      transition: background 0.15s;
      border-bottom: 1px solid #f0f4f8;
    }

    tbody tr:hover { background: #ebf4ff; }
    tbody tr:last-child { border-bottom: none; }
    .gender-col { text-align: center !important; padding-left: 30px !important; padding-right: 30px !important; }

    td {
      padding: 11px 16px;
      font-size: 14px;
    }

    td.idx { color: #a0aec0; font-size: 12px; width: 36px; text-align: center; }
    td.first-name { font-weight: 600; color: #2d3748; }
    td.last-name { color: #2d3748; }

    td.birth {
      color: #4a5568;
      white-space: nowrap;
    }
    td.birth .year { font-weight: 600; }
    td.birth .age {
      font-size: 12px;
      color: #718096;
      background: #edf2f7;
      padding: 2px 7px;
      border-radius: 10px;
      margin-right: 6px;
    }

    td.fed-id {
      font-family: monospace;
      font-size: 13px;
      color: #2b6cb0;
    }
    td.fed-id.empty { color: #cbd5e0; font-style: italic; font-family: inherit; font-size: 13px; }

    .pay-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }
    .pay-trial   { background: #e2e8f0; color: #4a5568; }
    .pay-pending { background: #fefcbf; color: #744210; }
    .pay-paid    { background: #c6f6d5; color: #276749; }

    .level-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .level-beginner    { background: #bee3f8; color: #2c5282; }
    .level-intermediate{ background: #fef3c7; color: #92400e; }
    .level-advanced    { background: #d1fae5; color: #065f46; }

    .group-name-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px 8px;
      background: #f7fafc;
      border-bottom: 1px solid #e2e8f0;
    }
    .group-name-text { font-size: 15px; font-weight: 700; color: #2d3748; }
    .btn-edit-name {
      background: none;
      border: none;
      cursor: pointer;
      color: #a0aec0;
      font-size: 15px;
      padding: 2px 6px;
      border-radius: 4px;
      line-height: 1;
    }
    .btn-edit-name:hover { background: #e2e8f0; color: #4a5568; }
    .name-edit-input {
      font-size: 14px;
      font-family: inherit;
      border: 2px solid #4299e1;
      border-radius: 6px;
      padding: 4px 10px;
      outline: none;
      min-width: 160px;
    }
    .btn-name-save {
      background: #38a169; color: white; border: none;
      border-radius: 6px; padding: 4px 10px; cursor: pointer;
      font-size: 13px; font-family: inherit;
    }
    .btn-name-cancel {
      background: #e2e8f0; color: #4a5568; border: none;
      border-radius: 6px; padding: 4px 10px; cursor: pointer;
      font-size: 13px; font-family: inherit;
    }

    .pay-select { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
    .pay-btn {
      border: 2px solid #e2e8f0;
      background: white;
      border-radius: 8px;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      transition: all 0.15s;
    }
    .pay-btn.active-trial   { border-color: #718096; background: #e2e8f0; font-weight: 700; }
    .pay-btn.active-pending { border-color: #d69e2e; background: #fefcbf; font-weight: 700; }
    .pay-btn.active-paid    { border-color: #38a169; background: #c6f6d5; font-weight: 700; }

    .stats-bar {
      padding: 10px 20px;
      background: #f7fafc;
      border-top: 1px solid #e2e8f0;
      font-size: 12px;
      color: #718096;
    }

    /* ===== ATTENDANCE STYLES ===== */
    .att-card {
      background: white;
      color: #1a202c;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
      overflow: hidden;
      max-width: 640px;
    }

    .att-card-header {
      background: linear-gradient(135deg, #276749, #2f855a);
      color: white;
      padding: 16px 20px;
      font-size: 17px;
      font-weight: 700;
    }

    .att-controls {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-bottom: 1px solid #e2e8f0;
      background: #f7fafc;
    }

    .att-control-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .att-control-row label {
      font-size: 14px;
      font-weight: 600;
      color: #4a5568;
      width: 60px;
      flex-shrink: 0;
    }

    .att-control-row select,
    .att-control-row input[type="date"] {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #cbd5e0;
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
      background: white;
      color: #2d3748;
      outline: none;
    }

    .att-control-row select:focus,
    .att-control-row input[type="date"]:focus {
      border-color: #276749;
      box-shadow: 0 0 0 2px rgba(39,103,73,0.15);
    }

    .att-actions {
      padding: 12px 20px;
      display: flex;
      gap: 8px;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
      flex-wrap: wrap;
    }

    .btn-att {
      padding: 8px 14px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.15s;
    }
    .btn-att:hover { opacity: 0.85; }

    .btn-check-all { background: #c6f6d5; color: #276749; }
    .btn-clear-all { background: #fed7d7; color: #c53030; }
    .btn-save {
      background: #276749;
      color: white;
      margin-right: auto;
      padding: 9px 20px;
      font-size: 14px;
    }
    .btn-save:disabled { background: #a0aec0; cursor: default; opacity: 1; }

    .save-status {
      font-size: 13px;
      font-weight: 600;
      color: #276749;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .save-status.visible { opacity: 1; }

    .att-player-list { padding: 8px 0; }

    .att-player-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 20px;
      cursor: pointer;
      transition: background 0.12s;
      min-height: 52px;
      border-bottom: 1px solid #f0f4f8;
      user-select: none;
    }
    .att-player-row:last-child { border-bottom: none; }
    .att-player-row:hover { background: #f0fff4; }
    .att-player-row.present { background: #f0fff4; }
    .att-player-row.present:hover { background: #e6ffed; }

    .att-player-row input[type="checkbox"] {
      width: 22px;
      height: 22px;
      accent-color: #276749;
      cursor: pointer;
      flex-shrink: 0;
    }

    .att-player-name {
      font-size: 15px;
      font-weight: 500;
      flex: 1;
      color: #2d3748;
    }
    .att-player-row.present .att-player-name { font-weight: 700; color: #22543d; }

    .att-present-badge {
      font-size: 12px;
      background: #c6f6d5;
      color: #276749;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
      display: none;
    }
    .att-player-row.present .att-present-badge { display: inline; }

    .att-summary {
      padding: 10px 20px;
      background: #f7fafc;
      border-top: 1px solid #e2e8f0;
      font-size: 13px;
      color: #4a5568;
      font-weight: 600;
    }

    .firebase-warning {
      background: #fffbeb;
      border: 1px solid #f6e05e;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 13px;
      color: #744210;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.open { display: flex; }

    .modal-box {
      background: white;
      border-radius: 14px;
      width: 360px;
      max-width: calc(100vw - 32px);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: modalIn 0.18s ease;
    }
    @keyframes modalIn {
      from { transform: scale(0.92); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }

    .modal-header {
      background: linear-gradient(135deg, #2b6cb0, #2c5282);
      color: white;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .modal-header h3 { font-size: 16px; font-weight: 700; }
    .modal-close {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-close:hover { background: rgba(255,255,255,0.35); }

    .modal-body { padding: 20px; overflow-y: auto; flex: 1; }

    .modal-field {
      margin-bottom: 14px;
    }
    .modal-field label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #4a5568;
      margin-bottom: 5px;
    }
    .modal-field label .required { color: #e53e3e; margin-right: 2px; }
    .modal-field input {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid #cbd5e0;
      border-radius: 7px;
      font-size: 14px;
      font-family: inherit;
      text-align: right;
    }
    .modal-field input:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43,108,176,0.1); }
    .modal-field input.input-error { border-color: #e53e3e; }
    .modal-field .age-hint {
      font-size: 12px;
      color: #276749;
      font-weight: 600;
      margin-top: 4px;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      padding: 0 20px 20px;
      justify-content: flex-end;
    }
    .btn-form-cancel {
      padding: 9px 18px;
      border: 1px solid #cbd5e0;
      background: white;
      border-radius: 7px;
      cursor: pointer;
      font-size: 14px;
      font-family: inherit;
      color: #4a5568;
    }
    .btn-form-cancel:hover { background: #f7fafc; }
    .btn-form-submit {
      padding: 9px 22px;
      background: #2b6cb0;
      color: white;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
    }
    .btn-form-submit:hover { background: #2c5282; }

    .player-added-badge {
      font-size: 10px;
      background: #bee3f8;
      color: #2b6cb0;
      padding: 1px 6px;
      border-radius: 8px;
      margin-right: 4px;
      font-weight: 600;
    }

    /* ===== PLAYER PROFILE ===== */
    .profile-modal-box {
      width: 520px;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      overflow: hidden;
      max-width: calc(100vw - 32px);
      animation: modalIn 0.18s ease;
    }
    .profile-modal-body {
      overflow-y: auto;
      flex: 1;
      padding: 0;
    }
    .profile-section {
      padding: 18px 22px;
      border-bottom: 1px solid #e2e8f0;
    }
    .profile-section:last-child { border-bottom: none; }
    .profile-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 700;
      color: #2d3748;
    }
    .btn-profile-edit {
      background: none;
      border: 1px solid #cbd5e0;
      color: #4a5568;
      padding: 4px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
    }
    .btn-profile-edit:hover { border-color: #2b6cb0; color: #2b6cb0; }
    .profile-modal-footer {
      padding: 12px 22px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fafafa;
    }
    .btn-remove-player {
      background: none;
      border: 1px solid #fed7d7;
      color: #c53030;
      padding: 5px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
    }
    .btn-remove-player:hover { background: #fff5f5; border-color: #fc8181; }
    .remove-confirm-text { font-size: 13px; color: #c53030; font-weight: 600; }
    .btn-confirm-yes {
      background: #c53030; color: white; border: none;
      border-radius: 6px; padding: 5px 12px; cursor: pointer;
      font-size: 13px; font-family: inherit;
    }
    .btn-confirm-no {
      background: #e2e8f0; color: #4a5568; border: none;
      border-radius: 6px; padding: 5px 12px; cursor: pointer;
      font-size: 13px; font-family: inherit;
    }
    .profile-detail-row {
      display: flex;
      gap: 12px;
      padding: 7px 0;
      border-bottom: 1px solid #f0f4f8;
      font-size: 14px;
      align-items: center;
    }
    .profile-detail-row:last-child { border-bottom: none; }
    .profile-label { color: #718096; min-width: 90px; font-size: 13px; }
    .profile-value { font-weight: 600; color: #1a202c; }

    .profile-att-numbers {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 8px;
    }
    .profile-att-big { font-size: 32px; font-weight: 800; line-height: 1; }
    .profile-att-small { font-size: 13px; color: #718096; }
    .profile-att-pct { font-size: 18px; font-weight: 700; margin-right: auto; }

    .att-dots-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
    .att-dot {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      cursor: default;
    }
    .att-dot.present { background: #c6f6d5; color: #276749; }
    .att-dot.absent  { background: #fed7d7; color: #c53030; }

    .player-row { cursor: pointer; }
    .player-row:hover td { background: #ebf8ff !important; }

    /* ===== REPORTS ===== */
    .reports-mode-bar {
      display: flex;
      gap: 8px;
      padding: 12px 20px;
      border-bottom: 1px solid #e2e8f0;
    }
    .mode-btn {
      flex: 1;
      padding: 9px 12px;
      border: 1px solid #cbd5e0;
      background: white;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      color: #4a5568;
      transition: all 0.15s;
    }
    .mode-btn:hover { border-color: #2b6cb0; color: #2b6cb0; }
    .mode-btn.active { background: #2b6cb0; color: white; border-color: #2b6cb0; }

    .rep-table { width: 100%; border-collapse: collapse; }
    .rep-table th {
      background: #f7fafc;
      padding: 10px 16px;
      font-size: 12px;
      color: #718096;
      font-weight: 700;
      border-bottom: 2px solid #e2e8f0;
      text-align: right;
    }
    .rep-table td { padding: 10px 16px; border-bottom: 1px solid #f0f4f8; font-size: 14px; }
    .rep-table tr:last-child td { border-bottom: none; }
    .rep-table tr:hover td { background: #f7fafc; }

    .progress-bar-wrap {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      min-width: 70px;
    }
    .progress-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.4s ease;
    }

    .bydate-list { padding: 4px 0; }
    .bydate-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      border-bottom: 1px solid #f0f4f8;
      min-height: 48px;
    }
    .bydate-row:last-child { border-bottom: none; }
    .bydate-row.present { background: #f0fff4; }
    .bydate-icon { font-size: 16px; flex-shrink: 0; }
    .bydate-name { font-size: 15px; font-weight: 500; flex: 1; }
    .bydate-row.present .bydate-name { font-weight: 700; color: #22543d; }

    .note-area { display: flex; align-items: center; gap: 6px; }
    .note-text {
      font-size: 12px;
      background: #fefcbf;
      color: #744210;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 500;
    }
    .btn-add-note {
      font-size: 12px;
      color: #718096;
      background: none;
      border: 1px dashed #cbd5e0;
      padding: 2px 8px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
    }
    .btn-add-note:hover { color: #2b6cb0; border-color: #2b6cb0; }
    .btn-edit-note {
      font-size: 12px;
      color: #718096;
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 4px;
    }
    .btn-edit-note:hover { color: #2b6cb0; }

    .note-input-wrap { display: flex; gap: 6px; align-items: center; }
    .note-input-wrap input {
      padding: 4px 8px;
      border: 1px solid #2b6cb0;
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      width: 200px;
    }
    .note-input-wrap input:focus { outline: none; box-shadow: 0 0 0 2px rgba(43,108,176,0.2); }
    .btn-note-save {
      padding: 4px 10px;
      background: #2b6cb0;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
    }
    .btn-note-cancel {
      padding: 4px 8px;
      background: none;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      color: #718096;
      font-family: inherit;
    }

    /* ===== —BOARD ===== */
    .dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:1100px; }
    .dash-card { background:white; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,0.08); overflow:hidden; }
    .dash-card-title { font-size:13px; font-weight:700; color:#718096; padding:14px 18px 0; text-transform:uppercase; letter-spacing:.5px; }
    .dash-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
    .dash-stat { padding:18px 16px; text-align:center; border-left:1px solid #f0f4f8; }
    .dash-stat:last-child { border-left:none; }
    .dash-stat-num { font-size:32px; font-weight:800; line-height:1; }
    .dash-stat-label { font-size:12px; color:#718096; margin-top:5px; }
    .dash-today-row { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid #f0f4f8; }
    .dash-today-row:last-child { border-bottom:none; }
    .dash-today-name { font-size:14px; font-weight:600; color:#2d3748; }
    .dash-today-sub { font-size:12px; color:#718096; margin-top:2px; }
    .dash-today-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-left:10px; }
    .btn-dash-att { padding:6px 14px; background:#ebf8ff; color:#2b6cb0; border:1px solid #bee3f8; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; font-family:inherit; }
    .btn-dash-att:hover { background:#bee3f8; }
    .dash-alert-row { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid #f0f4f8; font-size:13px; }
    .dash-alert-row:last-child { border-bottom:none; }
    .dash-alert-icon { font-size:16px; flex-shrink:0; }
    .dash-shortcut-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px 18px; }
    .btn-shortcut { padding:14px; border-radius:10px; border:none; cursor:pointer; font-size:14px; font-weight:700; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:6px; transition:opacity .15s; }
    .btn-shortcut:hover { opacity:.85; }
    .btn-shortcut span { font-size:24px; }

    /* ===== PAYMENTS PANEL ===== */
    .pay-panel-card { background:white; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.08); max-width:900px; overflow:hidden; width:100%; }
    .pay-summary-bar { display:flex; gap:12px; padding:16px 20px; background:#f7fafc; border-bottom:1px solid #e2e8f0; flex-wrap:wrap; }
    .pay-summary-box { flex:1; min-width:100px; background:white; border-radius:10px; padding:12px 16px; text-align:center; border:2px solid #e2e8f0; }
    .pay-summary-box .psb-num { font-size:28px; font-weight:700; }
    .pay-summary-box .psb-label { font-size:12px; color:#718096; margin-top:2px; }
    .pay-filter-bar { display:flex; gap:8px; padding:12px 20px; border-bottom:1px solid #e2e8f0; }
    .pay-filter-btn { padding:6px 16px; border-radius:20px; border:1px solid #e2e8f0; background:white; cursor:pointer; font-size:13px; font-family:inherit; font-weight:500; color:#4a5568; }
    .pay-filter-btn.active { background:#2b6cb0; color:white; border-color:#2b6cb0; }
    .pay-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pay-table { width:100%; border-collapse:collapse; font-size:13px; }
    .pay-table thead th { background:#edf2f7; color:#4a5568; padding:10px 14px; text-align:right; font-weight:600; white-space:nowrap; }
    .pay-table tbody td { padding:10px 14px; border-bottom:1px solid #f0f4f8; }
    .pay-table tbody tr:hover td { background:#f7fafc; }
    .pay-quick-btn { padding:4px 12px; border-radius:8px; border:1px solid #bee3f8; background:#ebf8ff; color:#2b6cb0; cursor:pointer; font-size:12px; font-family:inherit; font-weight:600; }
    .pay-quick-btn:hover { background:#bee3f8; }

    
    /* ===== MONTHLY ACTIVITY CALENDAR ===== */
    /* Dark = default (no class), light overrides with body.light-mode */
    :root {
        --cal-cell-bg:      rgba(255,255,255,0.04);
        --cal-club-bg:      rgba(249,115,22,0.25);
        --cal-no-club-bg:   rgba(255,255,255,0.03);
        --cal-other-bg:     rgba(0,0,0,0.35);
        --cal-other-op:     0.65;
        --cal-border:       rgba(255,255,255,0.1);
        --cal-grid-border:  rgba(255,255,255,0.12);
        --cal-title:        white;
        --cal-day-num:      rgba(255,255,255,0.8);
        --cal-btn-bg:       rgba(255,255,255,0.08);
        --cal-btn-border:   rgba(255,255,255,0.15);
        --cal-btn-color:    white;
        --cal-card-bg:      rgba(255,255,255,0.06);
        --cal-card-border:  rgba(255,255,255,0.1);
        --cal-card-text:    rgba(255,255,255,0.7);
        --cal-card-strong:  white;
        --cal-meta:         rgba(255,255,255,0.45);
        --cal-legend-text:  rgba(255,255,255,0.85);
        --cal-legend-border:rgba(255,255,255,0.12);
        --cal-row-text:     rgba(255,255,255,0.8);
    }
    body.light-mode, .cal-preview-light {
        --cal-cell-bg:      white;
        --cal-club-bg:      #fef3c7;
        --cal-no-club-bg:   white;
        --cal-other-bg:     #f9fafb;
        --cal-other-op:     0.5;
        --cal-border:       #d1d5db;
        --cal-grid-border:  #d1d5db;
        --cal-title:        #0d2137;
        --cal-day-num:      #374151;
        --cal-btn-bg:       white;
        --cal-btn-border:   #e2e8f0;
        --cal-btn-color:    #0d2137;
        --cal-card-bg:      white;
        --cal-card-border:  #e2e8f0;
        --cal-card-text:    #4a5568;
        --cal-card-strong:  #0d2137;
        --cal-meta:         #718096;
        --cal-legend-text:  #0d2137;
        --cal-legend-border:#e2e8f0;
        --cal-row-text:     #2d3748;
    }
    .pub-cal-wrap          { max-width:1100px; margin:0 auto; padding:20px 16px; direction:rtl; }
    .pub-cal-header        { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .pub-cal-title         { font-size:28px; font-weight:900; color:var(--cal-title); }
    .pub-cal-nav           { display:flex; gap:8px; }
    .pub-cal-nav button    { background:var(--cal-btn-bg); border:1px solid var(--cal-btn-border); border-radius:8px; padding:6px 16px; cursor:pointer; font-size:16px; font-family:inherit; color:var(--cal-btn-color); transition:opacity .15s; }
    .pub-cal-nav button:hover { opacity:.8; }
    .pub-cal-body          { display:flex; gap:16px; }
    .pub-cal-sidebar       { width:200px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
    .pub-cal-legend-item   { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--cal-legend-text); padding:8px 10px; border-radius:8px; border:1px solid var(--cal-legend-border); }
    .pub-cal-legend-dot    { width:18px; height:18px; border-radius:4px; flex-shrink:0; border:1px solid rgba(0,0,0,0.1); }
    .pub-cal-note          { font-size:12px; color:var(--cal-card-text); line-height:1.6; background:var(--cal-card-bg); border-radius:8px; padding:10px 12px; border:1px solid var(--cal-card-border); white-space:pre-line; }
    .pub-cal-note strong   { display:block; font-size:13px; color:var(--cal-card-strong); margin-bottom:4px; }
    .pub-cal-intl          { background:var(--cal-card-bg); border-radius:10px; padding:10px 12px; border:1px solid var(--cal-card-border); margin-bottom:12px; }
    .pub-cal-intl h4       { font-size:11px; font-weight:700; color:var(--cal-meta); text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px; }
    .pub-cal-intl-row      { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--cal-row-text); padding:4px 0; border-bottom:1px solid var(--cal-legend-border); }
    .pub-cal-intl-row:last-child { border-bottom:none; }
    .pub-cal-intl-dates    { color:var(--cal-meta); font-size:11px; white-space:nowrap; margin-top:1px; }
    .pub-cal-grid-wrap     { flex:1; min-width:0; }
    .pub-cal-grid          { display:grid; grid-template-columns:repeat(7,1fr); border-right:1px solid var(--cal-grid-border); border-top:1px solid var(--cal-grid-border); }
    .pub-cal-dow           { background:#1e3a6e; color:white; text-align:center; padding:10px 4px; font-size:13px; font-weight:700; border-left:1px solid rgba(255,255,255,0.1); border-bottom:2px solid #1e3a6e; }
    .pub-cal-cell          { min-height:90px; border-left:1px solid var(--cal-border); border-bottom:1px solid var(--cal-border); padding:6px; position:relative; box-sizing:border-box; background:var(--cal-cell-bg); }
    .pub-cal-cell.club-day { background:var(--cal-club-bg); }
    .pub-cal-cell.no-club  { background:var(--cal-no-club-bg); }
    .pub-cal-cell.other-month { background:var(--cal-other-bg); opacity:var(--cal-other-op); }
    .pub-cal-day-num       { font-size:14px; font-weight:700; color:var(--cal-day-num); margin-bottom:4px; }
    .pub-cal-event         { font-size:11px; padding:2px 5px; border-radius:4px; margin-bottom:2px; color:white; font-weight:600; line-height:1.3; display:block; }
    @media(max-width:700px){
        .pub-cal-body { flex-direction:column; }
        .pub-cal-sidebar { width:100%; flex-direction:row; flex-wrap:wrap; }
        .pub-cal-legend-item { flex:1 1 calc(50% - 6px); }
        .pub-cal-intl { width:100%; }
        .pub-cal-cell { min-height:60px; padding:3px; }
        .pub-cal-day-num { font-size:12px; }
        .pub-cal-event { font-size:10px; }
        .pub-cal-dow { font-size:11px; padding:6px 2px; }
        .pub-cal-title { font-size:20px; }
    }
    @media(max-width:400px){
        .pub-cal-cell { min-height:44px; }
        .pub-cal-event { display:none; }
        .pub-cal-cell.has-event::after { content:'●'; font-size:8px; color:#f97316; display:block; }
    }

    }

    /* ===== WEEKLY SCHEDULE GRID ===== */
    .weekly-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .weekly-grid { display: flex; min-height: 320px; min-width: 480px; }

    /* ===== —BOARD ALERT SPLIT ===== */
    .dash-alert-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

    /* ===== CALENDAR PANEL ===== */
    .cal-card { background:white; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,0.08); width:100%; overflow:hidden; }
    .cal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e2e8f0; }
    .cal-nav-btn { background:none; border:1px solid #e2e8f0; border-radius:8px; padding:6px 14px; cursor:pointer; font-size:16px; font-family:inherit; color:#4a5568; }
    .cal-nav-btn:hover { background:#f7fafc; }
    .cal-month-title { font-size:18px; font-weight:700; color:#2d3748; }
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
    .cal-dow { text-align:center; padding:10px 4px; font-size:12px; font-weight:600; color:#718096; border-bottom:1px solid #e2e8f0; }
    .cal-day { min-height:72px; padding:6px; border-bottom:1px solid #f0f4f8; border-left:1px solid #f0f4f8; position:relative; }
    .cal-day.other-month { background:#fafafa; }
    .cal-day.today { background:#ebf8ff; }
    .cal-day-num { font-size:13px; font-weight:600; color:#4a5568; margin-bottom:4px; }
    .cal-day.other-month .cal-day-num { color:#cbd5e0; }
    .cal-group-dot { font-size:11px; padding:2px 6px; border-radius:10px; margin-bottom:2px; display:block; color:white; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cal-legend { display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px; border-top:1px solid #e2e8f0; }
    .cal-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#4a5568; }
    .cal-legend-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }

    .search-input { width:100%;padding:12px 16px;font-size:16px;font-family:inherit;border:2px solid #e2e8f0;border-radius:10px;outline:none;transition:border .2s;margin-bottom:16px; }
    .search-input:focus { border-color:#2b6cb0; box-shadow: 0 0 0 3px rgba(43,108,176,0.1); }
    .search-result-row { cursor:pointer; }
    .search-result-row:hover td { background:#ebf8ff; }

    @media print {
      body { background: white; }
      header, .tabs-bar, .sidebar-overlay, .att-controls, .reports-mode-bar,
      #repDateRow, .btn-print-report, .profile-modal-footer { display: none !important; }
      .content { padding: 0; }
      .tab-panel { display: block !important; }
      .tab-panel:not(#tab-reports) { display: none !important; }
      .att-card { box-shadow: none; border: 1px solid #e2e8f0; }
      .att-card-header { font-size: 16px; }
      .progress-bar-wrap { display: none; }
      .print-header { display: block !important; }
    }
    .print-header { display: none; font-size: 14px; color: #2d3748; margin-bottom: 8px; font-weight: 600; }

    /* ===== SATURDAY LEAGUES ===== */
    .sat-panel { max-width: 900px; }
    .sat-round-card { background: white; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 20px; overflow: hidden; }
    .sat-round-header { background: #1a2744; color: white; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .sat-round-title { font-size: 16px; font-weight: 800; }
    .sat-round-meta { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 3px; }
    .sat-round-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .sat-slot-header { padding: 10px 20px; background: #f7f9fc; border-top: 1px solid #e8edf2; border-bottom: 1px solid #e8edf2; font-size: 13px; font-weight: 700; color: #2d3748; display: flex; align-items: center; gap: 8px; }
    .sat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .sat-table th { background: #f0f4f8; color: #4a5568; font-weight: 700; padding: 9px 14px; text-align: right; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
    .sat-table td { padding: 9px 14px; border-bottom: 1px solid #f0f4f8; vertical-align: middle; }
    .sat-table tr:last-child td { border-bottom: none; }
    .sat-table tr:hover td { filter: brightness(0.97); }
    .sat-div-badge { display: inline-block; min-width: 28px; text-align: center; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 800; border: 1.5px solid; }
    .sat-result-badge { display: inline-block; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: #f0f4f8; color: #4a5568; min-width: 44px; text-align: center; }
    .sat-team-name { font-weight: 600; color: #2d3748; }
    .sat-our-team { background: #fffbeb; color: #92400e; font-weight: 800; border-radius: 6px; padding: 2px 8px; }
    .btn-sat-sm { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .btn-sat-sm:hover { background: rgba(255,255,255,0.25); }
    .btn-sat-add { background: #2b6cb0; color: white; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .btn-sat-add:hover { background: #2c5282; }

    /* ===== TABLET (768px) ===== */
    @media (max-width: 768px) {
      .tabs-bar {
        height: 48px;
        padding: 0 8px;
        gap: 1px;
        -webkit-overflow-scrolling: touch;
      }
      .cat-btn {
        padding: 6px 10px;
        font-size: 12.5px;
        height: 34px;
      }
      .content { padding: 16px 14px; }
      /* Hub cards — compact on tablet */
      .hub-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
      .hub-card { padding: 18px 12px; }
      .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
      .dash-stat-num { font-size: 26px; }
      .profile-modal-box { width: calc(100vw - 32px); }
      .modal-overlay > div[style*="width"] { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
      /* Tables — horizontal scroll */
      .table-scroll, .pay-panel-card, .sat-panel, .att-card { max-width: 100%; }
      table { min-width: 0; }
      .pay-panel-card { border-radius: 10px; }
      /* Weekly grid — scrollable */
      .weekly-grid { min-width: 440px; min-height: 240px; }
      /* Calendar monthly */
      .cal-day { min-height: 52px; }
      .cal-group-dot { font-size: 10px; padding: 1px 4px; }
      /* Generic table wrapper for panels without table-scroll */
      .fed-players-table-wrap, .tourn-table-wrap, .sat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      /* Dashboard — stats wider on tablet */
      .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
      /* Attendance controls */
      .att-controls { max-width: 100%; }

      /* ===== LANDING PAGE — TABLET/MOBILE ===== */
      .landing-topbar { padding: 10px 14px; gap: 10px; }
      .landing-topbar-left .club-name { font-size: 13px; }
      .landing-topbar-left img { height: 38px; }
      .btn-login-top { padding: 8px 16px; font-size: 14px; }
      .btn-instructors { padding: 8px 12px; font-size: 13px; }
      /* Move login button to 2nd position in nav (right after עמוד הבית) */
      .site-nav > button:first-child { order: -2; }
      .nav-tab-login { order: -1; margin-right: 0; border-right: 1px solid rgba(255,255,255,0.1); }
      .btn-theme-toggle { display: none; }
      /* Stack schedule + sidebar vertically */
      .landing-main { flex-direction: column; overflow: visible; }
      .landing-sidebar {
        width: 100%; border-right: none; border-top: 1px solid rgba(255,255,255,0.1);
        border-left: none; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 14px 14px;
      }
      .sidebar-card { flex: 1 1 calc(50% - 6px); min-width: 160px; }
      .sidebar-cta { width: 100%; }
      .landing-schedule-area { padding: 12px 14px; }
      /* Site (public) pages */
      .site-title-row { padding: 12px 16px; }
      .site-title-text h1 { font-size: 20px; }
      .site-logo-img { height: 44px; }
      .hero-overlay h2 { font-size: 22px; }
      .hero-overlay p { font-size: 14px; margin-bottom: 18px; }
      .page-section-title { padding: 14px 16px; }
    }

    /* ===== MOBILE (600px) ===== */
    @media (max-width: 600px) {
      /* Header */
      header {
        padding: 10px 16px;
        flex-direction: column;
        gap: 6px;
        align-items: center;
      }
      header .logo { font-size: 26px; }
      header h1 { font-size: 17px; }
      header p { font-size: 11px; }
      .header-user-area {
        position: static !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
      }
      .btn-header-sm { padding: 6px 12px; font-size: 12px; }

      /* Content */
      .content { padding: 10px; }

      /* Group/team name header */
      .group-name-header { font-size: 15px; padding: 10px 14px; }
      .sub-group-header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
      .sub-group-header h3 { font-size: 14px; }
      .btn-add-in-header { font-size: 12px; padding: 5px 10px; }

      /* Tables — horizontal scroll + hide less-critical columns */
      .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      /* Groups (10 cols): hide מין(4) מספר שחקן(6) מד כושר(7) כרטיס(8) הצטרפות(9) */
      /* Teams (11 cols): same + רמה(11) hidden too, show: # שם שנת לידה תשלום */
      table th:nth-child(4), table td:nth-child(4),
      table th:nth-child(6), table td:nth-child(6),
      table th:nth-child(7), table td:nth-child(7),
      table th:nth-child(8), table td:nth-child(8),
      table th:nth-child(9), table td:nth-child(9),
      table th:nth-child(11), table td:nth-child(11) { display: none; }
      td, thead th { padding: 8px 10px; font-size: 13px; }
      td.idx { width: 24px; font-size: 11px; }

      /* Modals — full screen */
      .modal-box { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; max-height: 94vh; }
      .profile-modal-box { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; max-height: 95vh; }
      .modal-header { padding: 14px 16px; }
      .modal-body { padding: 14px 16px; }
      .profile-section { padding: 14px 16px; }
      .modal-field label { font-size: 13px; }
      .modal-actions { padding: 12px 16px; gap: 8px; }

      /* Dashboard */
      .dash-stats-row { grid-template-columns: repeat(2, 1fr); }
      .dash-stat { padding: 12px 8px; }
      .dash-stat-num { font-size: 22px; }
      .dash-stat-label { font-size: 11px; }
      .dash-grid { gap: 12px; }
      .dash-shortcut-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 14px; }
      .dash-alert-row { font-size: 12px; padding: 8px 14px; flex-wrap: wrap; }
      .dash-today-row { padding: 10px 14px; }

      /* Attendance */
      .att-card { max-width: 100%; }
      .att-card-header { font-size: 15px; }
      .att-actions { flex-wrap: wrap; gap: 6px; }
      .btn-att { flex: 1 1 auto; text-align: center; min-width: 70px; font-size: 13px; }
      .btn-save { width: 100%; justify-content: center; }

      /* Reports */
      .reports-mode-bar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
      .mode-btn { font-size: 13px; padding: 8px 10px; }

      /* Payments */
      .pay-filter-bar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
      .pay-filter-btn { font-size: 12px; padding: 5px 12px; }
      .pay-summary-bar { gap: 8px; padding: 10px 14px; }
      .pay-table thead th, .pay-table tbody td { padding: 7px 10px; font-size: 12px; }

      /* Search panel */
      .search-filters { flex-wrap: wrap; gap: 8px; }

      /* Calendar monthly */
      .cal-day { font-size: 11px; min-height: 36px; }
      .cal-header { padding: 10px 14px; }
      .cal-month-title { font-size: 15px; }
      .cal-legend { padding: 8px 12px; gap: 6px; }

      /* Weekly schedule grid */
      .weekly-grid { min-height: 180px; }
      .weekly-grid-wrap { border-radius: 0; }

      /* Dashboard alert split — stack on mobile */
      .dash-alert-split { grid-template-columns: 1fr; }
      .dash-alert-split > div:first-child { border-left: none; border-bottom: 1px solid #e2e8f0; }

      /* Name edit */
      .name-edit-input { min-width: 100px; }

      /* Pay/level select buttons */
      .pay-select { flex-direction: column; }
      .pay-btn { padding: 8px 12px; font-size: 13px; }

      /* Weekly modal */
      .weekly-box { padding: 16px 12px; }

      /* Profile detail rows */
      .profile-detail-row { font-size: 13px; padding: 7px 0; }
      .profile-label { min-width: 80px; font-size: 12px; }

      /* Profile att-numbers — wrap to 2 columns */
      .profile-att-numbers { flex-wrap: wrap; gap: 6px; }
      .profile-att-numbers > div { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }

      /* Stats bar */
      .stats-bar { font-size: 12px; padding: 6px 14px; }

      /* ===== LANDING PAGE — MOBILE ===== */
      .landing-topbar { padding: 8px 12px; }
      .btn-instructors { display: none; } /* hide on small screens, login is the priority */
      .btn-login-top { padding: 9px 20px; font-size: 14px; font-weight: 800; }
      .landing-sidebar { flex-direction: column; }
      .sidebar-card { flex: none; width: 100%; min-width: 0; }
      .hero-overlay h2 { font-size: 18px; }
      .hero-overlay p { font-size: 13px; }
      .stat-item { min-width: 100px; padding: 14px 10px; }
      .stat-num { font-size: 22px; }
      .site-title-row { flex-direction: column; gap: 8px; text-align: center; padding: 12px 16px; }
      .site-title-text h1 { font-size: 18px; }
      /* Login modal — ensure full-width card on mobile */
      .login-card { padding: 28px 20px; border-radius: 16px; }
      .login-card .login-logo { font-size: 36px; }
      .login-card h2 { font-size: 19px; }
      .login-field input { font-size: 16px; } /* prevent iOS zoom */

      /* Settings panel — subgroup rows wrap */
      .cg-sg-row, .ct-sg-row, .eg-sg-row, .et-sg-row { flex-wrap: wrap; }

      /* Attendance control row — label stays, select full width */
      .att-control-row { flex-wrap: wrap; }
      .att-control-row label { min-width: 60px; }

      /* Tournaments panel */
      .tourn-card-header, .tourn-row { flex-wrap: wrap; gap: 6px; }

      /* Saturday leagues */
      .sat-round-header { flex-wrap: wrap; gap: 8px; }
      .sat-table td, .sat-table th { padding: 7px 8px; font-size: 12px; }

      /* Federation players table */
      .fed-table td, .fed-table th { padding: 7px 8px; font-size: 12px; }

      /* Payments group-filter cards — 2 per row */
      .pay-group-cards { flex-wrap: wrap; }
      .pay-group-cards > div { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }

      /* Reports table */
      .rep-table td, .rep-table th { padding: 6px 8px; font-size: 12px; }

      /* ===== PORTAL — MOBILE ===== */

      /* Hub cards — 2-per-row grid on phones */
      .hub-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding-top: 6px; }
      .hub-card { padding: 14px 10px; }
      .hub-card-icon { font-size: 24px; margin-bottom: 6px; }
      .hub-card-title { font-size: 12px; }

      /* Portal top nav — emoji-only theme toggle to save space */
      #portal-theme-toggle { font-size: 16px; padding: 3px 6px; }

      /* Portal JS-created modals (z-index:9999) — shrink overlay padding on mobile */
      .modal-overlay[style*="z-index:9999"] { padding: 8px !important; }

      /* Inner div of those modals — reduce padding so content has room */
      .modal-overlay[style*="z-index:9999"] > div:not(.modal-box):not(.profile-modal-box) {
        padding: 18px 14px !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
      }

      /* Person rows in people admin — wrap action buttons below on tiny screens */
      .people-admin-row { flex-wrap: wrap; }

      /* Settings section panel title */
      #panel-settings h3 { font-size: 16px; }
    }

    /* ===== VERY SMALL SCREENS (≤400px) ===== */
    @media (max-width: 400px) {
      header h1 { font-size: 15px; }
      header p { display: none; }
      .btn-header-sm { font-size: 11px; padding: 5px 10px; }
      .content { padding: 8px; }
      td, thead th { padding: 6px 8px; font-size: 12px; }
      .sub-group-header { padding: 8px 12px; }
      .btn-add-in-header { font-size: 11px; padding: 4px 8px; }
      .modal-box, .profile-modal-box { border-radius: 10px; }
      .dash-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
      .dash-stat-num { font-size: 20px; }
      .dash-stat { padding: 10px 6px; }
      .dash-stat-label { font-size: 10px; }
      .weekly-grid { min-width: 360px; min-height: 150px; }
      .att-actions { gap: 4px; }
      .btn-att { font-size: 12px; padding: 6px 8px; }
      .profile-att-numbers > div { min-width: 100%; }
      .pay-group-cards > div { min-width: 100%; }
      /* Hub cards — force 2 columns minimum on tiny screens */
      .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
      .hub-card { padding: 12px 8px; }
      .hub-card-icon { font-size: 22px; }
      .hub-card-title { font-size: 11px; }
      /* Cat-btn — very compact */
      .cat-btn { padding: 5px 8px; font-size: 12px; height: 32px; }
    }




    /* ===== FB POST ===== */
    .featured-post-section { background:#0d2137; padding:48px 24px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .featured-post-wrap { max-width:540px; margin:0 auto; }
    .featured-post-wrap iframe { border-radius:12px; width:100%; border:none; overflow:hidden; }

    /* ===== ACHIEVEMENTS ===== */
    .achievements-section { background:#0a1a2e; padding:56px 24px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .section-header { text-align:center; margin-bottom:40px; }
    .section-header h2 { font-size:28px; font-weight:900; color:white; margin:0 0 8px; }
    .section-header p { font-size:15px; color:rgba(255,255,255,0.55); margin:0; }
    .section-header .section-line { width:48px; height:3px; background:#f97316; margin:12px auto 0; border-radius:2px; }
    .achievements-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; max-width:960px; margin:0 auto; }
    .ach-card {
      background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
      border-radius:16px; padding:24px; text-align:center; transition:transform 0.2s;
    }
    .ach-card:hover { transform:translateY(-4px); background:rgba(255,255,255,0.09); }
    .ach-icon { font-size:36px; margin-bottom:12px; }
    .ach-num { font-size:36px; font-weight:900; color:#f97316; line-height:1; margin-bottom:6px; }
    .ach-label { font-size:14px; font-weight:700; color:white; margin-bottom:4px; }
    .ach-desc { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.5; }

    /* ===== UPCOMING ACTIVITIES ===== */
    .upcoming-section { background:#0d2137; padding:48px 24px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .upcoming-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; max-width:820px; margin:0 auto; }
    .upcoming-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-right:4px solid #f97316; border-radius:16px; padding:20px; text-align:center; transition:transform 0.2s; }
    .upcoming-card:hover { transform:translateY(-4px); background:rgba(255,255,255,0.09); }
    .upcoming-date { font-size:13px; font-weight:800; color:#f97316; margin-bottom:8px; letter-spacing:.3px; }
    .upcoming-title { font-size:15px; font-weight:700; color:white; line-height:1.4; }

    /* Loading skeletons — shown briefly while the real content loads, instead of
       flashing stale/placeholder content that then gets swapped for the real thing. */
    .upcoming-card.skeleton { border-right-color:rgba(255,255,255,.15); cursor:default; }
    .upcoming-card.skeleton:hover { transform:none; background:rgba(255,255,255,0.05); }
    .skeleton-line { height:14px; border-radius:6px; margin:0 auto; }
    .skeleton-date { width:55%; margin-bottom:12px; }
    .skeleton-title { width:80%; height:16px; }
    .skeleton-line,
    .gallery-item.skeleton .gallery-item-img {
      background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
      background-size:400% 100%;
      animation:skeleton-shimmer 1.4s ease infinite;
    }
    @keyframes skeleton-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
    body.light-mode .skeleton-line,
    body.light-mode .gallery-item.skeleton .gallery-item-img {
      background:linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63%);
      background-size:400% 100%;
    }
    body.light-mode .upcoming-card.skeleton { border-right-color:#e2e8f0; }
    .news-card-img-skeleton { width:100%; height:300px; border-radius:0; }
    @media(max-width:600px){ .news-card-img-skeleton { height:200px; } }

    /* ===== TESTIMONIALS ===== */
    .testimonials-section { background:#0d2137; padding:56px 24px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .testimonials-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; max-width:960px; margin:0 auto; }
    .testimonial-card {
      background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
      border-radius:16px; padding:24px; position:relative;
    }
    .testimonial-quote { font-size:40px; color:#f97316; line-height:0.5; margin-bottom:12px; font-family:Georgia,serif; }
    .testimonial-text { font-size:14px; color:rgba(255,255,255,0.8); line-height:1.7; margin-bottom:16px; font-style:italic; }
    .testimonial-author { display:flex; align-items:center; gap:10px; }
    .testimonial-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#f97316,#ea580c); display:flex; align-items:center; justify-content:center; font-weight:800; color:white; font-size:15px; flex-shrink:0; }
    .testimonial-name { font-size:14px; font-weight:700; color:white; }
    .testimonial-role { font-size:12px; color:rgba(255,255,255,0.45); }

    /* ===== TESTIMONIALS CAROUSEL ===== */
    .testi-wrap  { position:relative; max-width:960px; margin:0 auto; }
    .testi-track { overflow:hidden; }
    .testi-inner { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); direction:ltr; }
    .testi-page  { flex:0 0 100%; box-sizing:border-box; direction:rtl; }
    .testi-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:none; color:white; font-size:18px; width:38px; height:38px; cursor:pointer; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .testi-arrow:hover { background:rgba(0,0,0,.75); }
    .testi-arrow.prev { right:-19px; }
    .testi-arrow.next { left:-19px; }
    .testi-dots  { display:flex; justify-content:center; gap:8px; margin-top:20px; }
    .testi-dot   { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); border:none; cursor:pointer; padding:0; transition:background .25s,transform .25s; }
    .testi-dot.active { background:#f97316; transform:scale(1.35); }
    @media(max-width:820px){ .testi-arrow.prev{right:6px} .testi-arrow.next{left:6px} }

    /* ===== GALLERY ===== */
    .gallery-section { background:#0a1a2e; padding:56px 24px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; max-width:960px; margin:0 auto; align-items:start; }
    .gallery-item { border-radius:12px; overflow:hidden; cursor:pointer; background:var(--bg-card); }
    .gallery-item-img { position:relative; overflow:hidden; aspect-ratio:1/1; }
    .gallery-item-img img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 0.3s; display:block; }
    .gallery-item:hover .gallery-item-img img { transform:scale(1.05); }
    .gallery-caption { padding:8px 12px; font-size:13px; text-align:center; color:var(--text-secondary); line-height:1.4; }
    /* ===== TOURNAMENT CALENDAR ===== */
    .tc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
    .tc-day { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; min-height:88px; padding:5px 6px; cursor:pointer; display:flex; flex-direction:column; transition:background .15s; }
    .tc-day:hover { background:rgba(255,255,255,.09); }
    .tc-day.outside { background:transparent!important; border-color:transparent!important; cursor:default; pointer-events:none; }
    .tc-day.today { border:2px solid #f97316!important; }
    .tc-day-num { font-size:12px; font-weight:700; margin-bottom:4px; }
    .tc-chip { font-size:10px; padding:2px 5px; border-radius:5px; color:white; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
    .tc-week-hdr { text-align:center; font-size:11px; font-weight:700; opacity:.45; padding:4px 0; }
    .tc-month-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
    .tc-month-tab { padding:6px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.7); font-size:12px; cursor:pointer; white-space:nowrap; font-family:inherit; transition:all .15s; }
    .tc-month-tab.active { background:#f97316; border-color:#f97316; color:white; font-weight:700; }
    .tc-month-tab:hover:not(.active) { background:rgba(255,255,255,.08); }

    /* ===== TOURNAMENTS PAGE ===== */
    .pub-page-wrap { max-width:960px; margin:0 auto; padding:40px 24px; direction:rtl; }
    .pub-section-title { text-align:center; margin-bottom:36px; }
    .pub-section-title h2 { font-size:28px; font-weight:900; color:white; margin:0 0 8px; }
    .pub-section-title p { font-size:15px; color:rgba(255,255,255,0.6); margin:0; }
    .tourn-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:36px; }
    .tourn-card {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
      border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px;
      transition:background 0.2s;
    }
    .tourn-card:hover { background:rgba(255,255,255,0.1); }
    .tourn-card-icon { font-size:32px; }
    .tourn-card-name { font-size:17px; font-weight:800; color:white; }
    .tourn-card-when { font-size:13px; color:#f97316; font-weight:600; }
    .tourn-card-desc { font-size:13px; color:rgba(255,255,255,0.65); line-height:1.6; }
    .tourn-card-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
    .badge-open { background:rgba(74,222,128,0.2); color:#4ade80; }
    .badge-rated { background:rgba(96,165,250,0.2); color:#60a5fa; }
    .badge-free { background:rgba(249,115,22,0.2); color:#f97316; }
    .tourn-fed-link { text-align:center; padding:24px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; }
    .tourn-fed-link p { color:rgba(255,255,255,0.65); font-size:14px; margin-bottom:14px; }
    .btn-fed { display:inline-flex; align-items:center; gap:8px; background:#1e3a6e; color:white; text-decoration:none; border-radius:10px; padding:12px 24px; font-size:14px; font-weight:700; transition:background 0.2s; }
    .btn-fed:hover { background:#16305d; }

    /* ===== CONTACT PAGE ===== */
    .contact-page-wrap { max-width:800px; margin:0 auto; padding:40px 24px; direction:rtl; }
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
    @media(max-width:600px){ .contact-grid { grid-template-columns:1fr; } }
    .contact-card {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
      border-radius:16px; padding:24px;
    }
    .contact-card h3 { font-size:14px; font-weight:700; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:1px; margin:0 0 16px; }
    .contact-card .cc-name { font-size:18px; font-weight:800; color:white; margin-bottom:6px; }
    .contact-card .cc-role { font-size:13px; color:rgba(255,255,255,0.55); margin-bottom:14px; }
    .btn-wa-lg { display:inline-flex; align-items:center; gap:8px; background:#25D366; color:white; border:none; border-radius:10px; padding:12px 20px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit; width:100%; justify-content:center; transition:background 0.2s; }
    .btn-wa-lg:hover { background:#1da851; }
    .contact-info-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:14px; color:rgba(255,255,255,0.8); }
    .contact-info-row:last-child { border-bottom:none; }
    .contact-info-row .ci-icon { font-size:20px; flex-shrink:0; }
    .contact-map { border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.1); margin-top:24px; }
    .contact-map iframe { width:100%; height:280px; border:none; display:block; }
    .contact-social-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; justify-content:center; }
    /* ===== CONTACT FORM ===== */
    .contact-form-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:28px; margin-top:24px; direction:rtl; }
    .contact-form-card h3 { font-size:16px; font-weight:700; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:1px; margin:0 0 20px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    @media(max-width:600px){ .form-row { grid-template-columns:1fr; } }
    .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .form-group label { font-size:13px; color:rgba(255,255,255,0.6); font-weight:600; }
    .form-group input, .form-group select, .form-group textarea {
      background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
      border-radius:10px; padding:12px 14px; color:white; font-size:14px;
      font-family:inherit; direction:rtl; outline:none; transition:border 0.2s;
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,0.3); }
    .form-group input:focus, .form-group textarea:focus { border-color:#f97316; }
    .form-group textarea { resize:vertical; min-height:110px; }
    .btn-submit { width:100%; background:#f97316; color:white; border:none; border-radius:12px; padding:14px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; transition:background 0.2s; margin-top:4px; }
    .btn-submit:hover { background:#ea580c; }
    .btn-submit:disabled { background:#555; cursor:not-allowed; }
    .form-success { display:none; text-align:center; padding:24px; color:#4ade80; font-size:16px; font-weight:700; }
    body.light-mode .form-group input, body.light-mode .form-group select, body.light-mode .form-group textarea { background:#f0f4f8; border-color:#cbd5e0; color:#1a202c; }
    body.light-mode .form-group label { color:#4a5568; }
    body.light-mode .contact-form-card { background:white; border-color:#e2e8f0; }

    /* ===== LANDING PAGE ===== */
    #landing-page {
      display: none; flex-direction: column;
      font-family: 'Segoe UI', Arial, sans-serif;
      min-height: 100vh;
    }
    #landing-page.visible { display: block; }
    body.auto-login #landing-page { display: none !important; }
    body.auto-login::before { content: ''; position: fixed; inset: 0; background: #0d2137; z-index: 9999; }
    body.auto-login::after { content: ''; position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 10000; }
    body.landing-active > header,
    body.landing-active > .tabs-bar,
    body.landing-active > .tab-content { display: none !important; }
    body.landing-active { overflow-x: hidden; }
    #landing-page { overflow-x: hidden; }

    /* ===== PUBLIC WEBSITE ===== */
    #landing-page { flex-direction:column; }
    .site-header { background:#1e3a6e; color:white; }
    .site-title-row { display:flex; align-items:center; justify-content:space-between; padding:14px 32px; direction:rtl; }
    .site-title-text h1 { font-size:28px; font-weight:900; margin:0; letter-spacing:-0.5px; }
    .site-logo-img { height:64px; width:auto; border-radius:50%; }
    .site-nav { background:#16305d; display:flex; direction:rtl; border-top:1px solid rgba(255,255,255,0.1); overflow-x:auto; }
    .nav-tab { padding:13px 22px; border:none; background:transparent; color:rgba(255,255,255,0.75); font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; border-bottom:3px solid transparent; white-space:nowrap; transition:all 0.2s; }
    .nav-tab:hover { color:white; background:rgba(255,255,255,0.07); }
    .nav-tab.active { color:white; border-bottom-color:#f97316; background:rgba(255,255,255,0.08); }
    .nav-tab-login { margin-right:auto; color:#f97316; border-right:1px solid rgba(255,255,255,0.1); }
    .nav-social-icons { display:flex; align-items:center; gap:2px; padding:0 10px; border-right:1px solid rgba(255,255,255,.1); }
    .nav-social-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:6px; opacity:.72; transition:opacity .2s,background .2s; text-decoration:none; }
    .nav-social-icon:hover { opacity:1; background:rgba(255,255,255,.12); }
    .site-page { display:none; }
    .site-page.active { display:block; }
    .hero-section { position:relative; }
    .hero-video-wrap { position:relative; width:100%; height:400px; background:#000; overflow:hidden; }
    .hero-video-frame { position:absolute; top:0; left:0; width:100%; height:100%; border:none; pointer-events:none; object-fit:cover; }
    .hero-title-bar { text-align:center; padding:20px 24px 16px; background:var(--bg-main); }
    .hero-title-bar h2 { font-size:28px; font-weight:900; color:var(--text-primary); margin:0; }
    /* ===== PEOPLE PAGE ===== */
    .people-subtabs { display:flex; gap:10px; justify-content:center; padding:20px 20px 4px; flex-wrap:wrap; direction:rtl; }
    .people-subtab { padding:9px 22px; border-radius:50px; border:2px solid rgba(255,255,255,.2); background:transparent; color:inherit; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; transition:all .2s; }
    .people-subtab:hover { background:rgba(255,255,255,.07); }
    .people-subtab.active { background:#f97316; border-color:#f97316; color:white; }
    .people-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; padding:24px; max-width:1100px; margin:0 auto; direction:rtl; }
    .person-card { background:var(--bg-card); border-radius:16px; padding:24px 20px; text-align:center; border:1px solid rgba(255,255,255,.08); transition:transform .2s,box-shadow .2s; }
    .person-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
    .person-photo-wrap { width:96px; height:96px; border-radius:50%; overflow:hidden; margin:0 auto 14px; background:rgba(255,255,255,.1); border:3px solid rgba(249,115,22,.4); }
    .person-photo { width:100%; height:100%; object-fit:cover; display:block; }
    .person-photo-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:38px; }
    .person-name { font-size:17px; font-weight:800; margin-bottom:4px; }
    .person-role { font-size:13px; color:#f97316; font-weight:700; margin-bottom:10px; }
    .person-bio { font-size:13px; opacity:.72; line-height:1.65; white-space:pre-line; }
    body.light-mode .people-subtab { border-color:rgba(0,0,0,.2); }
    body.light-mode .people-subtab:hover { background:rgba(0,0,0,.05); }
    .btn-hero-primary { background:#f97316; color:white; border:none; border-radius:12px; padding:13px 32px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
    .btn-hero-primary:hover { background:#ea580c; }
    .btn-hero-secondary { background:rgba(255,255,255,0.15); color:white; border:2px solid rgba(255,255,255,0.5); border-radius:12px; padding:11px 28px; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; }
    .btn-hero-secondary:hover { background:rgba(255,255,255,0.25); }
    .stats-bar { background:#1e3a6e; display:flex; justify-content:center; flex-wrap:wrap; direction:rtl; }
    .stat-item { flex:1; min-width:140px; text-align:center; padding:22px 16px; border-left:1px solid rgba(255,255,255,0.12); color:white; }
    .stat-item:last-child { border-left:none; }
    .stat-num { font-size:30px; font-weight:900; color:#f97316; }
    .stat-label { font-size:13px; opacity:0.8; margin-top:4px; }
    .about-section { background:#0d2137; padding:52px 24px 40px; direction:rtl; border-top:1px solid rgba(255,255,255,0.08); }
    .about-text { max-width:820px; margin:0 auto; }
    .about-text h3 { font-size:26px; font-weight:900; color:#f97316; margin:0 0 20px; text-align:center; }
    .about-text p { font-size:16px; line-height:1.9; color:rgba(255,255,255,0.85); margin:0 0 16px; }
    .about-links { display:flex; flex-wrap:wrap; gap:10px; max-width:820px; margin:24px auto 0; justify-content:center; }
    .btn-about-link { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; border:none; border-radius:10px; padding:12px 22px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; text-align:center; transition:background 0.2s; }
    .btn-about-link:hover { background:rgba(255,255,255,0.2); }

    .social-bar { background:#0a1a2e; padding:36px 24px; text-align:center; direction:rtl; border-top:1px solid #e2e8f0; }
    .social-bar h3 { font-size:20px; font-weight:800; color:white; margin:0 0 24px; }
    .social-links { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
    .social-link { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:14px; font-size:15px; font-weight:700; text-decoration:none; transition:transform 0.15s,opacity 0.15s; color:white; }
    .social-link:hover { transform:translateY(-2px); opacity:0.9; }
    .social-link-fb { background:#1877f2; }
    .social-link-ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
    .social-link-waze { background:#33ccff; color:#1a1a1a; }

    .site-footer { background:#16305d; color:rgba(255,255,255,0.75); text-align:center; padding:24px 16px; font-size:13px; direction:rtl; }
    .footer-social { display:flex; justify-content:center; gap:16px; margin-bottom:10px; font-size:22px; }
    .site-footer a { color:rgba(255,255,255,0.8); text-decoration:none; }
    .site-footer a:hover { color:white; }
    .page-section-title { background:#0d2137; border-bottom:1px solid rgba(255,255,255,0.1); padding:20px 32px; direction:rtl; }
    .page-section-title h2 { font-size:22px; font-weight:800; color:white; margin:0 0 4px; }
    .page-section-title p { font-size:13px; color:rgba(255,255,255,0.6); margin:0; }

    .landing-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 28px; border-bottom: 1px solid rgba(255,255,255,0.12);
      flex-shrink: 0; gap: 16px;
    }
    .landing-topbar-left { display:flex; align-items:center; gap:10px; }
    .landing-topbar-left img { height: 48px; width: auto; }
    .landing-topbar-left .club-name { font-size: 16px; font-weight: 700; }
    .landing-topbar-right { display:flex; align-items:center; gap:10px; }
    .btn-login-top {
      background: #f97316; color: white; border: none; border-radius: 10px;
      padding: 9px 24px; font-size: 15px; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: background 0.2s;
      box-shadow: 0 3px 12px rgba(249,115,22,0.35);
    }
    .btn-login-top:hover { background: #ea580c; }
    .btn-instructors {
      background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.25);
      border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: background 0.2s;
    }
    .btn-instructors:hover { background: rgba(255,255,255,0.2); }
    .landing-main {
      display: flex; flex: 1; overflow: hidden; gap: 0;
    }
    .landing-schedule-area {
      flex: 1; padding: 16px 20px; overflow-y: auto;
    }
    .landing-schedule-area h2 {
      font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.6);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
    }
    .schedule-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .schedule-table th {
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
      padding: 8px 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .schedule-table td {
      padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: middle;
    }
    .schedule-table tr:hover td { background: rgba(255,255,255,0.05); }
    .level-badge {
      display: inline-block; padding: 3px 8px; border-radius: 20px;
      font-size: 11px; font-weight: 700; white-space: nowrap;
    }
    .level-beginner { background: rgba(74,222,128,0.2); color: #4ade80; }
    .level-intermediate { background: rgba(96,165,250,0.2); color: #60a5fa; }
    .level-advanced { background: rgba(249,115,22,0.2); color: #f97316; }
    .price-cell { font-weight: 700; color: #fbbf24; font-size: 12px; white-space: nowrap; }
    .landing-sidebar {
      width: 240px; flex-shrink: 0; padding: 16px 16px;
      border-right: 1px solid rgba(255,255,255,0.1);
      border-left: 1px solid rgba(255,255,255,0.1);
      display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
    }
    .sidebar-card {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px; padding: 14px 16px;
    }
    .sidebar-card h3 {
      font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
    }
    .price-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:13px; }
    .price-row:last-child { border-bottom:none; }
    .price-row .label { color: rgba(255,255,255,0.75); }
    .price-row .amount { font-weight:700; color:#fbbf24; }
    .contact-row { display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:13px; gap:8px; }
    .contact-row:last-child { border-bottom:none; }
    .contact-row .cname { font-weight:700; margin-bottom:2px; }
    .contact-row .cphone { color:rgba(255,255,255,0.55); font-size:12px; direction:ltr; text-align:right; }
    .sidebar-address { font-size:12px; color:rgba(255,255,255,0.55); line-height:1.6; }
    .sidebar-cta { margin-top:auto; }

    /* ===== INSTRUCTORS MODAL ===== */
    #instructors-modal {
      position: fixed; top:0; left:0; width:100vw; height:100vh;
      background: rgba(0,0,0,0.75); z-index: 3500;
      display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    #instructors-modal.visible { display: flex; }
    .instructors-box {
      background: linear-gradient(135deg, #0d2137, #1a3a6b);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 20px; padding: 28px; width: 660px; max-width: 100%;
      max-height: 85vh; overflow-y: auto; color: white;
    }
    .instructors-box h2 { font-size: 20px; font-weight: 800; margin-bottom: 20px; text-align:center; }
    .instructor-item {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .instructor-item:last-child { border-bottom: none; }
    .inst-avatar {
      width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #f97316, #ea580c);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800; color: white;
      overflow: hidden; border: 2px solid rgba(255,255,255,0.25);
    }
    .inst-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .inst-body { flex: 1; }
    .inst-name { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
    .inst-title { font-size: 12px; color: #f97316; font-weight: 600; margin-bottom: 4px; }
    .inst-desc { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; }
    .inst-phone { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; direction: ltr; display: inline-block; }

    .inst-contact { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
    .btn-wa {
      display:inline-flex; align-items:center; gap:5px;
      background:#25D366; color:white; border:none; border-radius:8px;
      padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;
      text-decoration:none; font-family:inherit; line-height:1;
    }
    .btn-wa:hover { background:#1da851; }
    .btn-wa svg { flex-shrink:0; }
    .btn-close-instructors {
      display: block; margin: 20px auto 0; background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2); color: white; border-radius: 10px;
      padding: 10px 30px; cursor: pointer; font-size: 14px; font-family: inherit;
    }
    .btn-close-instructors:hover { background: rgba(255,255,255,0.2); }

        /* ===== LOGIN MODAL ===== */
    #login-modal {
      position: fixed; top:0; left:0; width:100vw; height:100vh;
      background: rgba(0,0,0,0.7); z-index: 3000;
      display: none; align-items: center; justify-content: center;
    }
    #login-modal.visible { display: flex; }
    .login-card {
      background: white; border-radius: 20px; padding: 40px;
      width: 360px; max-width: calc(100vw - 32px); text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .login-card .login-logo { font-size: 48px; margin-bottom: 8px; }
    .login-card h2 { font-size: 22px; font-weight: 800; color: #0d2137; margin-bottom: 4px; }
    .login-card .login-sub { font-size: 13px; color: #718096; margin-bottom: 28px; }
    .login-field { text-align: right; margin-bottom: 16px; }
    .login-field label { display: block; font-size: 13px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
    .login-field input {
      width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 10px;
      font-size: 15px; font-family: inherit; direction: ltr; text-align: left;
      transition: border-color 0.2s;
    }
    .login-field input:focus { outline: none; border-color: #f97316; }
    .login-error { color: #e53e3e; font-size: 13px; margin-bottom: 12px; min-height: 18px; }
    .btn-login-submit {
      width: 100%; padding: 12px; background: #f97316; color: white; border: none;
      border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
      font-family: inherit; transition: background 0.2s; margin-top: 4px;
    }
    .btn-login-submit:hover { background: #ea580c; }
    .btn-login-submit:disabled { background: #cbd5e0; cursor: not-allowed; }
    .btn-login-cancel { background: none; border: none; color: #718096; font-size: 13px; cursor: pointer; margin-top: 12px; font-family: inherit; }
    .btn-login-cancel:hover { color: #4a5568; }

    /* ===== HEADER USER AREA ===== */
    .header-user-area { display: flex; align-items: center; gap: 12px; position: absolute; right: 32px; }
    .header-user-name { font-size: 14px; color: rgba(255,255,255,0.9); font-weight: 600; }
    .btn-header-sm {
      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
      color: white; border-radius: 8px; padding: 8px 14px; cursor: pointer;
      font-size: 13px; font-family: inherit; white-space: nowrap;
    }
    .btn-header-sm:hover { background: rgba(255,255,255,0.25); }
  
  
    /* ===== WEEKLY SCHEDULE MODAL ===== */
    #weekly-modal { position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.85);z-index:3500;display:none;align-items:center;justify-content:center;padding:16px; }
    #weekly-modal.visible { display:flex; }
    .weekly-box { background:linear-gradient(160deg,#0d2137,#1a3a6b);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:24px 24px 20px;width:980px;max-width:calc(100vw - 32px);max-height:93vh;overflow-y:auto;color:white; }
    .weekly-cal { display:flex;gap:0;direction:rtl;overflow-x:auto; }
    .tax-col { position:relative;width:44px;flex-shrink:0;direction:ltr; }
    .tax-label { position:absolute;right:6px;font-size:11px;color:rgba(255,255,255,0.35);transform:translateY(-50%);white-space:nowrap; }
    .tax-line { position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,0.08);width:calc(100% + 9999px); z-index:0; pointer-events:none; }
    .wcol { flex:1;min-width:100px;border-right:1px solid rgba(255,255,255,0.07); }
    .wcol:last-child { border-right:none; }
    .wcol-head { text-align:center;font-size:14px;font-weight:800;padding:8px 4px 10px;color:rgba(255,255,255,0.9); }
    .wcol-body { position:relative; }
    .wev { position:absolute;left:3px;right:3px;border-radius:8px;padding:6px 7px;border:1px solid rgba(255,255,255,0.15);overflow:hidden;z-index:1;box-sizing:border-box; }
    .wev-time { font-size:11px;opacity:0.75;direction:ltr;text-align:right;margin-bottom:3px;white-space:nowrap; }
    .wev-name { font-size:13px;font-weight:700;line-height:1.3; }
    .wev-inst { font-size:11px;opacity:0.7;margin-top:2px; }
    .ev-beginner     { background:rgba(74,222,128,0.28);border-color:rgba(74,222,128,0.55);color:#ecfdf5; }
    .ev-intermediate { background:rgba(96,165,250,0.28);border-color:rgba(96,165,250,0.55);color:#eff6ff; }
    .ev-advanced     { background:rgba(249,115,22,0.30);border-color:rgba(249,115,22,0.60);color:#fff7ed; }
    .ev-adult        { background:rgba(167,139,250,0.28);border-color:rgba(167,139,250,0.55);color:#f5f3ff; }
    .ev-tournament   { background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.85); }
    .weekly-legend { display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:13px; }
    .legend-item { display:flex;align-items:center;gap:6px; }
    .legend-dot { width:11px;height:11px;border-radius:50%; }
    .btn-close-weekly { background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;border-radius:10px;padding:8px 20px;cursor:pointer;font-size:14px;font-family:inherit; }
    .btn-close-weekly:hover { background:rgba(255,255,255,0.2); }




    /* ===== REDESIGN: NIZKOCHESS-INSPIRED LANDING ===== */
    /* Use Heebo font for the public landing page */
    #landing-page, #landing-page * { font-family: 'Heebo', sans-serif !important; }

    /* --- Sticky single-row navbar --- */
    .site-header {
      position: sticky !important;
      top: 0;
      z-index: 300;
      background: rgba(5, 8, 14, 0.97) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.07) !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      height: 64px !important;
      padding: 0 28px !important;
      gap: 0 !important;
      color: white;
    }
    .site-title-row {
      padding: 0 !important;
      flex-shrink: 0 !important;
      height: 100% !important;
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      border-bottom: none !important;
    }
    .site-title-text h1 {
      font-size: 16px !important;
      font-weight: 800 !important;
      white-space: nowrap !important;
      letter-spacing: -0.2px !important;
    }
    .site-logo-img { height: 40px !important; border-radius: 50% !important; }
    .site-nav {
      flex: 1 !important;
      display: flex !important;
      align-items: stretch !important;
      height: 100% !important;
      background: transparent !important;
      border-top: none !important;
      overflow-x: visible !important;
      margin-right: 16px !important;
      min-width: 0 !important;
    }
    /* Only the informational tabs scroll — the login button and theme toggle stay
       outside this wrapper so they can never end up scrolled out of view with no
       visible scrollbar to hint they're there. */
    .nav-tabs-scroll {
      display: flex !important;
      align-items: stretch !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
      flex: 1 !important;
      min-width: 0 !important;
      /* Fade both edges so a tab truncated by the scroll boundary reads as
         "scroll for more" instead of looking like it's cut off/broken. */
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%) !important;
      mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%) !important;
    }
    .nav-tabs-scroll::-webkit-scrollbar { display: none; }
    .nav-tab-login, .btn-theme-toggle { flex-shrink: 0 !important; }
    .nav-tab {
      height: 100% !important;
      padding: 0 15px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      border-bottom: 3px solid transparent !important;
      border-radius: 0 !important;
      display: flex !important;
      align-items: center !important;
    }
    .nav-tab.active {
      color: white !important;
      border-bottom-color: #f97316 !important;
      background: rgba(255,255,255,0.05) !important;
    }
    .nav-tab-login {
      margin-right: auto !important;
      background: #f97316 !important;
      color: white !important;
      border-radius: 8px !important;
      height: 36px !important;
      align-self: center !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      border-bottom-color: transparent !important;
      padding: 0 18px !important;
      font-weight: 700 !important;
    }
    .nav-tab-login:hover { background: #ea580c !important; }
    .btn-theme-toggle {
      margin-right: 10px !important;
      flex-shrink: 0 !important;
      height: 34px !important;
      align-self: center !important;
    }

    /* --- Darker, richer background --- */
    #landing-page { background: #06090f !important; }
    .hero-overlay {
      background: linear-gradient(to bottom, rgba(6,9,15,0.45), rgba(6,9,15,0.88)) !important;
    }
    .stats-bar { background: #0c1627 !important; }
    .about-section { background: #06090f !important; border-top-color: rgba(255,255,255,0.06) !important; }
    .about-text h3 { color: #f97316 !important; }
    .achievements-section { background: #0b1526 !important; }
    .testimonials-section { background: #06090f !important; }
    .social-bar { background: #030508 !important; border-top-color: rgba(255,255,255,0.06) !important; }
    .site-footer { background: #030508 !important; }
    .page-section-title { background: #06090f !important; }

    /* --- Achievement cards: glass style --- */
    .ach-card {
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      border-radius: 18px !important;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    }
    .ach-card:hover {
      transform: translateY(-4px) !important;
      border-color: rgba(249,115,22,0.35) !important;
      box-shadow: 0 12px 40px rgba(249,115,22,0.12) !important;
    }
    .ach-num { color: #f97316 !important; }

    /* --- Testimonial cards: glass style --- */
    .testimonial-card {
      background: rgba(255,255,255,0.04) !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      border-radius: 18px !important;
      transition: transform 0.2s, border-color 0.2s !important;
    }
    .testimonial-card:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(249,115,22,0.3) !important;
    }

    /* --- Hero refinements --- */
    .hero-title-bar h2 { font-size: 32px !important; }
    .hero-overlay h2 { font-size: 36px !important; font-weight: 900 !important; }
    .hero-overlay p { font-size: 18px !important; }
    .btn-hero-primary {
      box-shadow: 0 4px 20px rgba(249,115,22,0.4) !important;
      border-radius: 10px !important;
    }

    /* --- Stat numbers glow --- */
    .stat-num {
      font-size: 32px !important;
      text-shadow: 0 0 20px rgba(249,115,22,0.4) !important;
    }

    /* --- Section headers --- */
    .section-header h2 { font-size: 28px !important; font-weight: 900 !important; }
    .section-line {
      width: 60px !important;
      height: 3px !important;
      background: #f97316 !important;
      margin: 12px auto 0 !important;
      border-radius: 2px !important;
    }


    /* ===== LIGHT MODE OVERRIDES for LANDING PAGE ===== */
    body.light-mode #landing-page { background: #f4f7fb !important; }
    body.light-mode .site-header { background: rgba(255,255,255,0.98) !important; border-bottom-color: #e2e8f0 !important; }
    body.light-mode .nav-tab { color: #2d3748 !important; }
    body.light-mode .nav-tab:hover { color: #1a202c !important; background: rgba(0,0,0,0.04) !important; }
    body.light-mode .nav-tab.active { color: #1a202c !important; border-bottom-color: #f97316 !important; background: rgba(0,0,0,0.04) !important; }
    body.light-mode .site-title-text h1 { color: #1a202c !important; }
    body.light-mode .hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.72)) !important; }
    body.light-mode .stats-bar { background: #1e3a6e !important; }
    body.light-mode .about-section { background: #f0f4f8 !important; }
    body.light-mode .about-text h3 { color: #1e3a6e !important; }
    body.light-mode .about-text p { color: #2d3748 !important; }
    body.light-mode .btn-about-link { background: rgba(0,0,0,0.07) !important; color: #1a202c !important; border: 1px solid #e2e8f0 !important; }
    body.light-mode .btn-about-link:hover { background: rgba(0,0,0,0.12) !important; }
    body.light-mode .achievements-section { background: #edf2f7 !important; }
    body.light-mode .ach-card { background: white !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; color: #1a202c !important; }
    body.light-mode .ach-card:hover { border-color: #f97316 !important; box-shadow: 0 8px 24px rgba(249,115,22,0.15) !important; }
    body.light-mode .ach-label { color: #4a5568 !important; }
    body.light-mode .ach-desc { color: #718096 !important; }
    body.light-mode .ach-icon { filter: none !important; }
    body.light-mode .upcoming-section { background: #f4f7fb !important; }
    body.light-mode .upcoming-card { background: white !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important; }
    body.light-mode .upcoming-title { color: #1a202c !important; }
    body.light-mode .testimonials-section { background: #f4f7fb !important; }
    body.light-mode .testimonial-card { background: white !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important; color: #1a202c !important; }
    body.light-mode .testi-dot { background:rgba(0,0,0,.18); }
    body.light-mode .testi-dot.active { background:#f97316; }
    body.light-mode .testi-arrow { background:rgba(0,0,0,.25); }
    body.light-mode .section-header h2 { color: #1a202c !important; }
    body.light-mode .section-header p { color: #718096 !important; }
    body.light-mode .social-bar { background: #1e3a6e !important; }
    body.light-mode .site-footer { background: #16305d !important; }
    body.light-mode .page-section-title { background: #edf2f7 !important; }
    body.light-mode .page-section-title h2 { color: #1a202c !important; }
    body.light-mode .page-section-title p { color: #718096 !important; }
    body.light-mode .btn-theme-toggle { background: rgba(0,0,0,0.08) !important; border-color: #cbd5e0 !important; color: #2d3748 !important; }


    /* ============================================================
       LIGHT MODE — ALL PUBLIC PAGES
       ============================================================ */

    /* Site-wide background per page */
    body.light-mode #page-clubs,
    body.light-mode #page-tournaments,
    body.light-mode #page-calendar,
    body.light-mode #page-contact { background: #f4f7fb !important; color: #1a202c !important; }

    /* Clubs page */
    body.light-mode .landing-schedule-area { background: #f4f7fb; color: #1a202c; }
    body.light-mode .schedule-table { color: #1a202c; }
    body.light-mode .price-cell { color: #b45309; }
    body.light-mode .level-beginner { background: rgba(34,197,94,0.15); color: #15803d; }
    body.light-mode .level-intermediate { background: rgba(59,130,246,0.15); color: #1d4ed8; }
    body.light-mode .level-advanced { background: rgba(249,115,22,0.15); color: #c2410c; }

    /* Tournaments page */
    body.light-mode .pub-section-title h2 { color: #1a202c !important; }
    body.light-mode .pub-section-title p { color: #718096 !important; }
    body.light-mode .tourn-card {
      background: white !important;
      border-color: #e2e8f0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    }
    body.light-mode .tourn-card:hover {
      background: #f8fafc !important;
      border-color: #f97316 !important;
    }
    body.light-mode .tourn-card-name { color: #1a202c !important; }
    body.light-mode .tourn-card-desc { color: #4a5568 !important; }
    body.light-mode .tourn-fed-link {
      background: #edf2f7 !important;
      border-color: #e2e8f0 !important;
    }
    body.light-mode .tourn-fed-link p { color: #4a5568 !important; }
    body.light-mode .btn-fed { background: #1e3a6e !important; color: white !important; }
    body.light-mode .badge-open { background: rgba(34,197,94,0.15) !important; color: #15803d !important; }
    body.light-mode .badge-rated { background: rgba(59,130,246,0.15) !important; color: #1d4ed8 !important; }
    body.light-mode .badge-free { background: rgba(249,115,22,0.15) !important; color: #c2410c !important; }

    /* Contact page */
    body.light-mode .contact-card {
      background: white !important;
      border-color: #e2e8f0 !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    }
    body.light-mode .contact-card h3 { color: #a0aec0 !important; }
    body.light-mode .contact-card .cc-name { color: #1a202c !important; }
    body.light-mode .contact-card .cc-role { color: #718096 !important; }
    body.light-mode .contact-info-row {
      color: #2d3748 !important;
      border-bottom-color: #e2e8f0 !important;
    }
    body.light-mode .contact-map { border-color: #e2e8f0 !important; }

    /* Gallery */
    body.light-mode .gallery-section { background: #edf2f7 !important; border-top-color: #e2e8f0 !important; }

    /* ============================================================
       MOBILE RESPONSIVE — LANDING PAGE HEADER
       ============================================================ */

    @media (max-width: 860px) {
      .site-header { padding: 0 16px !important; height: 58px !important; }
      .site-title-text h1 { font-size: 14px !important; }
      .site-logo-img { height: 36px !important; }
      .nav-tab { padding: 0 11px !important; font-size: 13px !important; }
      .btn-theme-toggle { display: none !important; }
    }

    @media (max-width: 600px) {
      .site-header { height: 52px !important; padding: 0 12px !important; }
      .site-title-text h1 { display: none !important; }
      .site-logo-img { height: 32px !important; }
      .nav-tab { padding: 0 9px !important; font-size: 12px !important; }
      .nav-tab-login { padding: 0 12px !important; font-size: 12px !important; }
    }

    /* ============================================================
       MOBILE RESPONSIVE — HERO & STATS
       ============================================================ */

    @media (max-width: 860px) {
      .hero-overlay h2 { font-size: 26px !important; }
      .hero-overlay p { font-size: 15px !important; margin-bottom: 18px !important; }
      .btn-hero-primary, .btn-hero-secondary { padding: 11px 22px !important; font-size: 14px !important; }
      .stats-bar { gap: 0 !important; }
      .stat-item { min-width: 100px !important; padding: 16px 10px !important; }
      .stat-num { font-size: 24px !important; }
      .stat-label { font-size: 11px !important; }
    }

    @media (max-width: 600px) {
      .hero-overlay h2 { font-size: 20px !important; }
      .hero-overlay p { font-size: 13px !important; display: none !important; }
      .hero-btns { flex-direction: column !important; align-items: center !important; }
      .btn-hero-primary, .btn-hero-secondary { width: 100% !important; max-width: 260px !important; }
      .stat-num { font-size: 20px !important; }
      .stat-item { min-width: 80px !important; padding: 12px 6px !important; }
    }

    /* ============================================================
       MOBILE RESPONSIVE — ABOUT / ACHIEVEMENTS / TESTIMONIALS
       ============================================================ */

    @media (max-width: 860px) {
      .about-section { padding: 36px 20px 28px !important; }
      .about-text p { font-size: 15px !important; }
      .about-links { gap: 8px !important; }
      .achievements-section,
      .testimonials-section { padding: 36px 16px !important; }
      .achievements-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
      .testimonials-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
      .ach-card { padding: 18px 14px !important; }
      .section-header h2 { font-size: 22px !important; }
    }

    @media (max-width: 600px) {
      .achievements-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
      .testimonials-grid { grid-template-columns: 1fr !important; }
      .ach-num { font-size: 26px !important; }
      .ach-label { font-size: 12px !important; }
      .ach-desc { font-size: 11px !important; }
    }

    @media (max-width: 400px) {
      .achievements-grid { grid-template-columns: 1fr !important; }
    }

    /* ============================================================
       MOBILE RESPONSIVE — PUBLIC PAGES (CLUBS, TOURNAMENTS, CONTACT)
       ============================================================ */

    @media (max-width: 860px) {
      .pub-page-wrap { padding: 28px 16px !important; }
      .pub-section-title { margin-bottom: 24px !important; }
      .pub-section-title h2 { font-size: 22px !important; }
      .tourn-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
      .contact-page-wrap { padding: 28px 16px !important; }
      .contact-grid { gap: 14px !important; }
    }

    @media (max-width: 600px) {
      .landing-main { flex-direction: column !important; }
      .landing-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
      }
      .sidebar-card { flex: 1 1 calc(50% - 6px) !important; min-width: 150px !important; }
      .landing-schedule-area { padding: 14px 14px !important; overflow-x: auto !important; }
      .schedule-table { font-size: 12px !important; }
      .schedule-table th, .schedule-table td { padding: 7px 8px !important; }
      .tourn-cards { grid-template-columns: 1fr !important; }
      .contact-grid { grid-template-columns: 1fr !important; }
      .contact-page-wrap { padding: 20px 14px !important; }
    }

    /* ============================================================
       MOBILE RESPONSIVE — SOCIAL BAR & FOOTER
       ============================================================ */

    @media (max-width: 600px) {
      .social-bar { padding: 24px 16px !important; }
      .social-bar h3 { font-size: 16px !important; margin-bottom: 16px !important; }
      .social-links { gap: 10px !important; }
      .social-link { padding: 10px 16px !important; font-size: 13px !important; }
      .site-footer { padding: 18px 16px !important; font-size: 12px !important; }
    }

    /* ============================================================
       WHATSAPP BUTTON MOBILE
       ============================================================ */

    @media (max-width: 600px) {
      #wa-float-btn {
        bottom: 16px !important;
        left: 16px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
      }
    }


    /* ---- LIGHT MODE: TESTIMONIALS ---- */
    body.light-mode .testimonial-text { color: #2d3748 !important; }
    body.light-mode .testimonial-name { color: #1a202c !important; }
    body.light-mode .testimonial-role { color: #718096 !important; }

    /* ---- LIGHT MODE: CLUBS SIDEBAR ---- */
    body.light-mode .sidebar-card h3 { color: #718096 !important; }
    body.light-mode .contact-row { border-bottom-color: #e2e8f0 !important; }
    body.light-mode .contact-row .cname { color: #1a202c !important; }
    body.light-mode .contact-row .cphone { color: #718096 !important; }
    body.light-mode .sidebar-address { color: #718096 !important; }
    body.light-mode .price-row .label { color: #4a5568 !important; }
    body.light-mode .price-row .amount { color: #b45309 !important; }
    body.light-mode .price-row { border-bottom-color: #e2e8f0 !important; }

    /* ---- LIGHT MODE: CONTACT PAGE INLINE-STYLE OVERRIDES ---- */
    /* Override inline color:rgba(255,255,255,…) on divs inside contact-info-row */
    body.light-mode .contact-info-row > div > div { color: #2d3748 !important; }
    body.light-mode .contact-info-row > div > a { color: #2563eb !important; }

  
  
    

    

    /* ===== NEWS CAROUSEL ===== */
    .news-section      { padding:40px 20px 32px; background:var(--bg-subtle); direction:rtl; }
    .news-section-title{ text-align:center;font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:28px; }
    .news-wrap         { position:relative;max-width:760px;margin:0 auto; }
    .news-track        { overflow:hidden;border-radius:16px; }
    .news-inner        { display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);direction:ltr; }
    .news-slide        { min-width:100%; }
    .news-card         { background:var(--bg-card);border-radius:16px;overflow:hidden; }
    .news-card-img     { width:100%;height:300px;object-fit:cover;display:block; }
    .news-card-no-img  { width:100%;height:120px;display:flex;align-items:center;justify-content:center;font-size:48px;background:var(--bg-subtle); }
    .news-card-body    { padding:22px 26px 26px;direction:rtl;text-align:right; }
    .news-card-date    { font-size:12px;color:var(--text-muted);margin-bottom:8px; }
    .news-card-title   { font-size:21px;font-weight:800;color:var(--text-primary);margin-bottom:12px;line-height:1.4; }
    .news-card-text    { font-size:15px;color:var(--text-muted);line-height:1.85; }
    .news-arrow        { position:absolute;top:42%;transform:translateY(-50%);background:rgba(0,0,0,.5);border:none;color:white;font-size:18px;width:38px;height:38px;cursor:pointer;border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;transition:background .2s; }
    .news-arrow:hover  { background:rgba(0,0,0,.75); }
    .news-arrow.prev   { right:-19px; }
    .news-arrow.next   { left:-19px; }
    .news-dots         { display:flex;justify-content:center;gap:8px;margin-top:16px; }
    .news-dot          { width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;padding:0;transition:background .25s,transform .25s; }
    .news-dot.active   { background:#f97316;transform:scale(1.35); }
    body.light-mode .news-dot { background:rgba(0,0,0,.18); }
    body.light-mode .news-dot.active { background:#f97316; }
    body.light-mode .news-arrow { background:rgba(0,0,0,.25); }
    @media(max-width:820px){ .news-arrow.prev{right:6px} .news-arrow.next{left:6px} }
    @media(max-width:600px){ .news-card-img{height:200px} .news-card-title{font-size:17px} .news-card-text{font-size:13px} }