.tabs {
      display: flex;
      gap: 12px;
      border-bottom: 2px solid #e0e0e0;
      margin-bottom: 5px;
    }

    .tab {
      padding: 10px 20px;
      font-size: 16px;
      font-weight: 600;
      color: #666;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 6px 6px 0 0;
    }

    .tab:hover {
      background-color: #f0f0f0;
      color: #000;
    }

    .tab.active {
      color: navy;
      border-bottom: 2px solid navy;
      background-color: #ffffff;
    }

    .tab-content {
      background-color: #ffffff;
      padding: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 0 6px 6px 6px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }