<style>
    .req-screen { background: var(--bg); min-height: 100vh; }
    .req-header {
      background: var(--card);
      padding: 16px 20px;
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .req-body { padding: 16px 20px; padding-bottom: 100px; }
    .req-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: var(--bg);
      border-radius: 50px;
      margin-bottom: 16px;
    }
    .req-tabs .req-tab {
      flex: 1;
      text-align: center;
      padding: 10px;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 500;
      border: none;
      background: none;
      color: var(--text-muted);
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      transition: var(--transition);
      position: relative;
    }
    .req-tabs .req-tab.active {
      background: var(--card);
      color: var(--primary);
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }
    .req-tabs .req-tab .tab-badge {
      position: absolute;
      top: -4px;
      right: 4px;
      background: var(--primary);
      color: #fff;
      font-size: 0.6rem;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .req-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      background: var(--card);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      margin-bottom: 8px;
      transition: var(--transition);
    }
    .req-item:hover { box-shadow: var(--shadow-sm); }
    .req-item img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
    }
    .req-item .req-info { flex: 1; }
    .req-item .req-info .req-name { font-weight: 600; font-size: 0.9rem; }
    .req-item .req-info .req-detail { font-size: 0.75rem; color: var(--text-muted); }
    .req-item .req-info .req-time { font-size: 0.7rem; color: var(--text-muted); }
    .req-profile-link { color: inherit; text-decoration: none; }
    .req-profile-link:hover { color: var(--primary); }
    .req-item .req-actions { display: flex; gap: 6px; }
    .req-item .req-actions button {
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      font-family: 'Poppins', sans-serif;
    }
    .req-item .req-actions .accept { background: var(--gradient-primary); color: #fff; }
    .req-item .req-actions .decline { background: var(--card); color: var(--text-muted); border: 1px solid var(--border); }
    .req-item .req-actions .decline:hover { border-color: #F44336; color: #F44336; }
    .req-item .match-badge-sm {
      padding: 2px 8px;
      border-radius: 50px;
      font-size: 0.65rem;
      font-weight: 600;
      background: rgba(233,30,99,0.1);
      color: var(--primary);
    }
    .req-tab-panel { display: none; }
    .req-tab-panel.active { display: block; }
  </style>

<div class="req-screen">
    <div class="req-header">
      <div class="d-flex align-items-center justify-content-between">
        <h5 class="fw-bold mb-0">{{__ "requests.title"}}</h5>
        <span class="text-muted" style="font-size:0.8rem">3 new</span>
      </div>
    </div>

    <div class="req-body">
      <div class="req-tabs">
        <button class="req-tab active" onclick="switchReqTab(this, 'received')">
          {{__ "requests.received"}} <span class="tab-badge">3</span>
        </button>
        <button class="req-tab" onclick="switchReqTab(this, 'sent')">{{__ "requests.sent"}}</button>
        <button class="req-tab" onclick="switchReqTab(this, 'accepted')">Accepted</button>
        <button class="req-tab" onclick="switchReqTab(this, 'rejected')">Rejected</button>
      </div>

      <!-- Received Tab -->
      <div class="req-tab-panel active" id="reqReceived"></div>

      <!-- Sent Tab -->
      <div class="req-tab-panel" id="reqSent"></div>

      <!-- Accepted Tab -->
      <div class="req-tab-panel" id="reqAccepted"></div>

      <!-- Rejected Tab -->
      <div class="req-tab-panel" id="reqRejected"></div>
    </div>

    <!-- Bottom Navigation -->
    {{> bottom-nav}}
  </div>

{{#section 'scripts'}}
<script src="/js/requests.js"></script>
{{/section}}
